<template>
  <div class="page_container">
    <div class="handleBox">
      <el-button :size="size" @click="addType">添加分类</el-button>
    </div>
    <div class="tableBox">
      <el-table :data="dataList" border style="width: 100%;" height="100%">
        <el-table-column
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column prop="itemKey" header-align="center" align="left" label="分类Code" width="200"></el-table-column>
        <el-table-column prop="itemValue" header-align="center" align="left" label="分类名称" min-width="100"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center"
                         width="150" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="editType(row)">编辑</el-button>
            <el-button type="text" size="small" style="color: #e66613" @click="deleteTravelType(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <EditTypeModal :typeDialogShow.sync="typeDialogShow" :propTypeInfo="propTypeInfo" @refreshData="getDataList"></EditTypeModal>
  </div>
</template>

<script>
  import api from '../../../utils/api'
  import { mapGetters } from 'vuex'
  import EditTypeModal from './components/EditTypeModal'
  export default {
    name: 'addressList',
    components: {
      EditTypeModal
    },
    data () {
      return {
        dataList: [],
        total: 0,
        propTypeInfo: {},
        typeDialogShow: false
      }
    },
    computed: {
      ...mapGetters(['size']),
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.$store.commit("app/SET_LOADING_STATE", true)
        api.getTravelType(this.searchForm).then((res) => {
          if (res) {
            this.dataList = Object.keys(res.data).map(key => {
              return {
                itemKey: key,
                itemValue: res.data[key]
              }
            })
          }
        }).catch((res) => {
        })
      },
      // 删除地址
      deleteTravelType (row) {
        let itemKey = row.itemKey
        this.delConfirm().then(() => {
          api.deleteTravelType({itemKey}).then(res => {
            this.$message.success('删除成功')
            this.getDataList()
          })
        })
      },
      editType (row) {
        Object.assign(this.propTypeInfo, row)
        this.typeDialogShow = true
      },
      addType () {
        this.propTypeInfo = {}
        this.typeDialogShow = true
      },
      // 重置
      resetSearch () {
        this.$refs['searchForm'].resetFields()
      },
      // 查询
      search () {
        this.searchForm.current = 1
        this.getDataList()
      },
    }
  }
</script>

<style lang="scss">
  .el-icon-star-on {
    cursor: pointer;
    &.isDefault {
      color: #1989fa;
    }
  }
</style>
